<template>
  <div class="orgStructure">
    <section class="header clearfix">
      <div class="back">
        <i class="iconfont iconfanhui1" @click="goBack()"></i>
        <span @click="goBack()">组织架构</span>
      </div>
      <div class="add">
        <i class="iconfont iconadd1"></i>
        <span @click="add()">添加组织单元</span>
      </div>
    </section>
    <section class="list">
      <span class="name">杭州启亿企业管理有限公司</span>
      <span class="num">直属31个成员</span>
    </section>
    <!--添加-->
    <el-dialog
      title="添加部门"
      :visible.sync="dialogFormVisible"
      :close-on-click-modal="false"
      :close-on-press-escape="false"
      :show-close="false"
      center
    >
      <el-form :model="form">
        <el-form-item label="部门名称(必填)" :label-width="form.formLabelWidth">
          <el-input
            v-model="form.departmentName"
            placeholder="在这里输入部门名称"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="部门主管(选填)" :label-width="form.formLabelWidth">
          <el-input
            v-model="form.departmentManager"
            placeholder="请选择部门主管"
            clearable
          ></el-input>
        </el-form-item>
        <el-form-item label="上级部门(必填)" :label-width="form.formLabelWidth">
          <el-select v-model="form.supDepartment" placeholder="请选择上级部门">
            <el-option
              label="杭州启亿企业管理有限公司"
              value="杭州启亿企业管理有限公司"
            ></el-option>
          </el-select>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogFormVisible = false"
          >确 定</el-button
        >
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { requestApiPost } from "../api/api";
import { reqRep } from "../report/reqReport";
import { resRep } from "../report/resReport";
export default {
  name: "orgStructure",
  data() {
    return {
      dialogFormVisible: false,
      form: {
        departmentName: "",
        departmentManager: "",
        supDepartment: "",
        formLabelWidth: "120px",
      },
    };
  },
  methods: {
    add() {
      this.dialogFormVisible = true;
    },
    goBack() {
      this.$router.go(-1);
    },
  },
  created() {},
};
</script>
<style scoped>
.header {
  padding: 15px;
  height: 50px;
  box-sizing: border-box;
  font-size: 14px;
  border-bottom: 1px solid #eee;
}
.header i {
  margin-right: 5px;
  cursor: pointer;
}
.add:hover {
  color: #13cb6e;
}
.header span {
  cursor: pointer;
}
.back {
  display: inline-block;
}
.add {
  float: right;
}
.list {
  font-size: 14px;
  padding: 10px 30px;
  border-radius: 3px;
  background-color: #eee;
}
.list span {
  height: 40px;
  line-height: 40px;
}
.num {
  color: #666;
  margin-left: 20px;
}
.el-input,
.el-select {
  width: 228px;
}
.el-form-item {
  width: 340px;
  margin: 0 auto 22px;
}
</style>
